<script setup lang="ts" name="SystemMenu">
import { getList, deleteById } from '@/api/system/menu'
import { Plus, Edit, Delete, Search, Refresh } from "@element-plus/icons-vue"
import type { FormInstance } from 'element-plus'
import { notify } from "@/utils/element"

/**
 * 查询参数
 */
const state = reactive({
  loading: false,
  query: {
    keyword: ''
  } as SysMenuQuery,
  tableList: [] as SysMenuType[]
})
const { loading } = { ...toRefs(state) }

/**
 * 初始化
 */
onMounted(() => {
  queryData()
})

/**
 * 初始化数据
 */
async function queryData() {
  try {
    state.loading = true
    const { data } = await getList(state.query)
    console.log('初始化数据-查询', data);
    state.tableList = data
  } catch (error) {
  } finally {
    state.loading = false
  }
}

/**
 * 搜索栏
 */
function handleQuery() {
  queryData()
}

/** 
 * 重置查询 
 */
const queryFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 修改ref
const editRef = ref();

/**
 * 新增下级
 */
function handleAdd(id?: string) {
  editRef.value.open('add', '新增', { id })
}

/**
 * 修改
 */
function handleEdit(row: string) {
  editRef.value.open('edit', '修改', row)
}

/**
 * 删除
 */
async function handleDelete(id: string) {
  try {
    state.loading = true
    await deleteById(id)
    // 提示成功
    notify('删除成功', { type: 'success' })
    // 刷新列表
    queryData()
  } catch (error) {
  } finally {
    state.loading = false
  }
}

/**
 * 点击行，展开、收起子菜单
 */
const tableListRef = ref()
function toggleRow(row: SysMenuType) {
  //console.log('toggleRow', row);
  tableListRef.value.toggleRowExpansion(row)
}
</script>

<template>
  <div class="page-nav">
    <div class="tab-header">
      <div class="tab-header-search">
        <el-form inline :model="state" ref="queryFormRef">
          <el-form-item label="菜单名称" prop="query.keyword">
            <el-input v-model="state.query.keyword" placeholder="请输入菜单名称" style="width: 200px" clearable />
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button type="primary" plain :icon="Search" @click="handleQuery()">搜 索</el-button>
            <el-button type="primary" plain :icon="Refresh" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tab-header-btn">
        <el-button type="primary" plain :icon="Plus" @click="handleAdd()">新增</el-button>
      </div>
    </div>
    <div class="tab-container">
      <el-table class="table-con" :data="state.tableList" v-loading="loading"
        :header-cell-style="{ backgroundColor: '#f7f7f7' }" row-key="id" ref="tableListRef" border
        @row-click="toggleRow">
        <el-table-column prop="meta.title" label="菜单名" header-align="center">
          <template #default="{ row }">
            <SvgIcon :name="row.meta?.icon || ''" />
            <span class="ml10">{{ row.meta.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由地址" header-align="center" />
        <el-table-column prop="component" label="组件地址" header-align="center" />
        <el-table-column prop="code" label="权限标识" header-align="center" />
        <el-table-column prop="type" label="类型" align="center" width="140">
          <template #default="{ row }">
            <el-tag effect="plain" :type="row.type === '1' ? 'primary' : 'success'">
              {{ row.type === '1' ? '菜单' : '按钮' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" width="130"></el-table-column>
        <el-table-column prop="date" label="操作" align="center" width="230">
          <template #default="{ row }">
            <el-button @click.stop="handleAdd(row.id)" v-if="row.type != '2'" :icon="Plus" type="primary" size="small"
              link>新增下级</el-button>
            <el-button @click.stop="handleEdit(row)" :icon="Edit" type="warning" link size="small">修改</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.meta?.title}】吗？`">
              <template #reference>
                <el-button :icon="Delete" type="danger" link size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--新增/编辑-->
    <menu-edit ref="editRef" @refresh="queryData"></menu-edit>
  </div>
</template>

<style scoped lang="scss">
.tab-header-search {
  :deep(.el-form-item) {
    margin-bottom: 0px !important;
  }
}
</style>